<header class="mui-bar mui-bar-nav header">
  <h1 class="mui-title">收货地址</h1>
</header>
<div class="mui-content">
  <ul class="mui-table-view">
  </ul>
  <div class="add-address">
    <div id="btn-addr">+新建收货地址</div>
    <i class="am-icon-angle-right"></i>
  </div>
  <div class="mui-input-group" id="create-addr" style="display: none">
    <div class="mui-input-row">
      <label>收件人</label>
      <input type="text" class="mui-input-clear" placeholder="" id="receiver">
    </div>
    <div class="mui-input-row">
      <label>手机</label>
      <input type="number" class="mui-input-clear" placeholder="" id="phone">
    </div>
    <div class="mui-input-row">
      <label>国家</label>
      <input type="text" class="mui-input-clear" placeholder="" id="country">
    </div>
    <div class="mui-input-row">
      <label>省市</label>
      <input type="text" class="mui-input-clear" id="city-picker">
    </div>
    <div class="mui-input-row">
      <label>地址</label>
      <input type="text" class="mui-input-clear" placeholder="" id="detail">
    </div>
    <div class="mui-button-row">
      <button type="button" class="mui-btn mui-btn-primary" >确认</button>
      <button type="button" class="mui-btn mui-btn-danger" >取消</button>
    </div>
  </div>
</div>
<script src="/js/mui.picker.min.js"></script>
<script src="/js/data.city.js"></script>
<script>
  $(function () {
    var customer_id = sessionStorage.getItem('customer_id');
    $.get('/api/user/address/?customer_id='+customer_id, function (call) {
      var html = '';
      for (var i=0; i<call.length; i++){
          html += '<li class="mui-table-view-cell mui-media"><a href="/user/address/edit/?addr='+call[i].id+'"><div class="mui-media-body">收件人：'+call[i].name+' 电话：'+call[i].tel+'<p class="mui-ellipsis">地址：'+call[i].addr+'</p></div></a></li>'
      }
      $('.mui-table-view').html(html);
    })
  })
</script>
<script>
  var city_picker = new mui.PopPicker({layer:3});
  city_picker.setData(init_city_picker);
  $("#city-picker").on("tap", function(){
    setTimeout(function(){
      city_picker.show(function(items){
        $("#city-picker").val((items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text);
      });
    },200);
  });
</script>
<script>
  $('#btn-addr').click(function () {
    $('.mui-input-group').css('display', 'block');
  })
  $('.mui-btn-primary').click(function () {
    var name = $('#receiver').val();
    var tel = $('#phone').val();
    var addr = $('#country').val()+$('#city-picker').val()+$('#detail').val();
    var customer_id = sessionStorage.getItem('customer_id');
    var json = {
        name: name,
        tel: tel,
        addr: addr
    };
    $.post('/api/user/address/?customer_id='+customer_id, json, function (err, call) {
      if (call == 'success'){
          mui.toast('新增收货地址');
          window.location.reload();
      }
    })
  });
  $('.mui-btn-danger').click(function () {
    $('.mui-input-group').css('display', 'none');
  })
</script>
